<template>
  <el-container class="product-container">
    <div style="width: 100%;">
      <el-steps :space="200" :active="activeStep" simple>
        <el-step title="商品基本信息" :icon="Edit"/>
        <el-step title="商品图片" :icon="Picture"/>
        <el-step title="商品套餐" :icon="UploadFilled"/>
        <el-step title="商品优惠" :icon="Sugar"/>
      </el-steps>
    </div>

    <div style="width: 100%;height: 500px">
      <!--    基本信息  -->
      <div style="width: 100%;margin-top: 20px" class="baseinfo-container"
           :hidden="activeStep!==1">
        <el-form
            label-position="right"
            label-width="100px"
            :model="productBaseInfo"
            style="max-width: 460px"
        >
          <el-form-item label="商品名">
            <el-input v-model="productBaseInfo.productName"/>
          </el-form-item>
          <el-form-item label="小标题">
            <el-input v-model="productBaseInfo.subTitle"/>
          </el-form-item>
          <el-form-item label="所属类别">
            <el-cascader v-model="productBaseInfo.cateId" :options="categoryData"
                         :props="categoryDataProp"
                         @change="handleChange"/>
          </el-form-item>
          <el-form-item label="封面图">
            <el-upload
                v-model="productBaseInfo.productImg"
                action="http://localhost/api/sys/file/upload"
                multiple
                :limit="1"
                :on-success="productImgUploadSuccess"
            >
              <el-avatar :src="productBaseInfo.productImg" shape="square" :size="180"></el-avatar>
            </el-upload>
          </el-form-item>
          <el-form-item label="原始价格">
            <el-input-number v-model="productBaseInfo.price" :precision="2" :step="0.1" :max="1000000000"/>
          </el-form-item>
          <el-form-item label="重量(kg)">
            <el-input-number v-model="productBaseInfo.weight" :precision="2" :step="0.1" :max="1000000000"/>
          </el-form-item>
          <el-form-item label="库存量">
            <el-input-number v-model="productBaseInfo.stockCount"/>
          </el-form-item>
        </el-form>
      </div>

      <div style="width: 100%;margin-top: 20px" class="image-container"
           :hidden="activeStep!==2">
        <el-form
            label-position="right"
            label-width="100px"
            :model="productImages"
            style="max-width: 1024px"
        >
          <el-form-item label="缩略图">
            <el-upload
                v-model:file-list="productImages.suolueImgs"
                action="http://localhost/api/sys/file/upload"
                list-type="picture-card"
                multiple

            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="详情图">
            <el-upload
                v-model:file-list="productImages.detailImgs"
                action="http://localhost/api/sys/file/upload"
                list-type="picture-card"
                multiple
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <div style="width: 100%;margin-top: 20px" class="taocan-container"
           :hidden="activeStep!==3">
        <el-form
            label-position="right"
            label-width="100px"
            :model="productEntry"
            style="max-width: 460px"
        >
          <el-form-item :label="'套餐'+en.id" v-for="(en,index) in productEntry" :key="en.id">
            <el-button type="danger" @click="deleteEntry(en.id)" v-if="en.id!==1">删除套餐</el-button>

            <el-input v-model="productEntry[index].id"  placeholder="套餐id" disabled />
            <el-input v-model="productEntry[index].entryName" >
              <template #prepend>套餐名</template>
            </el-input>
            <el-input v-model="productEntry[index].price"  placeholder="套餐价格">
              <template #prepend>套餐价格</template>
            </el-input>
            <el-input v-model="productEntry[index].stockCount" placeholder="库存数量">
              <template #prepend>库存数量</template>
            </el-input>
          </el-form-item>
          <el-button type="primary" @click="addEntry">添加套餐</el-button>
        </el-form>
      </div>

      <div style="width: 100%;margin-top: 20px" class="taocan-container"
           :hidden="activeStep!==4">
        <el-form
            label-position="right"
            label-width="100px"
            :model="productCoupon"
            style="max-width: 460px"
        >
          <el-form-item label="优惠券">
            <el-input v-model="productCoupon.couponName"/>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div style="width: 100%;margin-top: 20px" class="btn-container">
      <el-button type="warning" @click="preStep" v-if="activeStep>1">上一步</el-button>
      <el-button type="primary" @click="nextStep" v-if="activeStep<4">下一步</el-button>
      <el-button type="success" @click="finishAndSubmit" v-if="activeStep===4">提交数据</el-button>
    </div>

  </el-container>
</template>

<script setup>
import {Edit, Picture, UploadFilled, Sugar} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {getShopCategoryTreeAPI} from "@/api/shop/categoryapi"
import {addProductAPI} from "@/api/shop/productapi"
import {ElMessage} from 'element-plus'
//商品基本数据
const productBaseInfo = ref({
  productName: '',
  subTitle: '',
  productImg: '',
  price: '',
  weight: '',
  cateId: '',
  stockCount: ''
});
const productImgUploadSuccess = (resp, uploadFile, uploadFiles) => {
  productBaseInfo.value.productImg = resp.data
  console.log("最新图片地址：", productBaseInfo.value.productImg)
}


//商品图片数据
const productImages = ref({
  suolueImgs: [],
  detailImgs: []
});

//商品套餐
const productEntry = ref([{
  id: 1,
  entryName: '哈哈1',
  price: 88.88,
  stockCount: 10
}])

//记录有几个套餐


//添加套餐
const addEntry = ()=>{
  let currentId = productEntry.value[productEntry.value.length-1].id;
  productEntry.value.push({
    id: currentId+1,
    entryName: '哈哈1',
    price: 88.88,
    stockCount: 10
  });


}

//删除套餐
const deleteEntry = (id)=>{
  let remainEntry =new Array();
  //套餐的数据删除
  for (let i = 0; i < productEntry.value.length; i++) {
    if(productEntry.value[i].id !== id){
      remainEntry.push(productEntry.value[i])
    }
  }

  productEntry.value = remainEntry;

}


const productCoupon = ref({
  couponName: ''
})


//级联选择器
const categoryData = ref([]);
const categoryDataProp = {
  label: 'cateName',
  value: 'id',
  emitPath: false
};
const handleChange = (val) => {
  console.log("选中的值：", val)
  // cateIds: 是整个层级的值
  console.log("绑定到基本属性..", productBaseInfo.value.cateId)

}
onMounted(() => {
  getShopCategoryTreeAPI().then(resp => {
    categoryData.value = resp.data.data;
  })
})


//步骤条
const activeStep = ref(1);
const preStep = () => {
  activeStep.value = activeStep.value - 1;
}

const nextStep = () => {
  activeStep.value = activeStep.value + 1;
  //拿数据
  // console.log("所有图片，",productImages.value.detailImgs[0].response.data)
  console.log("所有录入的套餐",productEntry.value)
}

const finishAndSubmit = () => {



  let images = {
    "thumbnail": [],
    "detailImgs": []
  }

  //处理缩略图和详情图
  for (let suolueImg of productImages.value.suolueImgs) {
    images.thumbnail.push(suolueImg.response.data)
  }

  for (let detailImg of productImages.value.detailImgs) {
    images.detailImgs.push(detailImg.response.data)
  }
  //准备给后端提交的所有数据
  const submitData = {
    "productBaseInfo": productBaseInfo.value,
    "productImages": images,
    "productEntry": productEntry.value
  }

  console.log("准备提交的全量商品数据：",submitData);

  addProductAPI(submitData).then(resp=>{
    ElMessage.success("商品发布完成")
  })
}

</script>

<style scoped>
.product-container {
  flex-direction: column;
}

</style>
